<!--
 * @Description: 星巴克首页
 * @Author: rendc
 * @Date: 2021-08-18 09:20:30
 * @LastEditors: rendc
 * @LastEditTime: 2021-08-18 15:50:30
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验</title>
  <link rel="icon" type="image/png"
    href="https://www-static.chinacdn.starbucks.com.cn/prod/assets/favicons/favicon-32x32.png" sizes="32x32">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .body>.left {
      /* border: 1px solid tomato; */
      position: fixed;
      width: 30%;
      height: 100%;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
    }


    .left>.header {
      /* border: 1px solid goldenrod; */
      height: 48px;
      padding: 24px;
    }

    .header>div {
      float: left;
    }

    /* 头部logo */
    .left>.header>.logo {}

    .left>.header>.logo>a>img {
      width: 36px;
      margin-right: 12px;
    }

    /* 头部导航栏 */
    .header>div>li {
      float: left;
      list-style-type: none;
      padding: 5px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
    }

    /* 头部右侧的图标 */
    .left>.header>.icon {
      float: right;
      padding-top: 5px;
    }

    .left>.left_body {
      /* border: 1px solid cornflowerblue; */
      height: calc(100% - 100px);
      /* 100vh 是当前窗口的高度 */
      padding-top: calc((100vh - 100px)/2);
      padding-left: 84px;
      padding-right: 24px;
    }

    .left>.left_body>.text {
      font-size: 26px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      margin-bottom: 24px;
    }

    .left>.left_body>.button {
      color: #00A862;
      font-size: 1.6rem;
    }

    .left>.left_body>.button>.login {
      float: left;
      margin-right: 24px;
    }

    .left>.left_body>.button>.login>.login_btn {
      float: right;
    }

    .left>.left_body>.button>.login>img {
      padding-top: 5px;
    }

    .left>.left_body>.button>.register {
      float: left;
      border: 1px solid #00A862;
      border-radius: 48px;
      padding: 2px 12px;
    }

    .body>.right {
      /* border: 1px solid yellowgreen; */
      float: left;
      width: 70%;
      margin-left: 30%;
    }

    .body>.right>.lunbo>img {
      width: 100%;
      /* 解决div内部放图片 div高度比图片高 */
      display: block;
    }

    .body>.right>.div1 {
      padding: 0 24px;
      background-color: rgb(247, 247, 247);
    }

    .body>.right>.div1>.clear::after {
      content: "";
      display: block;
      clear: both;
    }

    .body>.right>.div1>.div1_1 {
      width: calc((100% - 72px) /3);
      padding: 12px;
      float: left;
    }

    .body>.right>.div1>.div1_1>img {
      width: 100%;
      box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
      border-radius: 2px;
      transition: transform 0.1s linear;
    }

    .body>.right>.div1>.div1_1>img:hover {
      box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.12);
      transform: translate3d(0, -4px, 0);
    }

    .body>.right>.div2 {
      /* border: 1px solid tomato; */
      height: 247px;
      /* 720+48=768 */
      margin: 0 calc((100% - 768px)/2);
      padding: 0 24px;
    }

    .body>.right>.div2>div {
      float: left;
      width: 50%;
    }

    .body>.right>.div2>.div2_1 {
      padding: 36px 0;
    }

    .body>.right>.div2>.div2_1>.title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 18px;
    }

    .body>.right>.div2>.div2_1>.text {
      width: 360px;
      color: rgba(0, 0, 0, 0.56);
      margin-bottom: 24px;
    }

    .body>.right>.div2>.div2_1>.text>a {
      color: #C2A661;
      text-decoration: none;
    }

    .body>.right>.div2>.div2_1>.button>div {
      float: left;
      border: 1px solid #00A862;
      border-radius: 48px;
      padding: 6px 18px;
      margin-right: 6px;
      color: #00A862;
    }

    .body>.right>.div2>.div2_1>.button>div:hover {
      cursor: pointer;
    }

    .body>.right>.div2>.div2_2 {
      text-align: center;
      padding-top: 88px;
    }

    .body>.right>.div3 {
      height: 412px;
      padding: 36px calc((100% - 768px)/2);
      background-color: rgb(247, 247, 247);
    }

    .body>.right>.div3>.title {
      font-size: 22px;
      margin-bottom: 18px;
      text-align: center;
    }

    .body>.right>.div3>.text {
      color: rgba(0, 0, 0, 0.56);
      margin-bottom: 24px;
      text-align: center;
    }

    .body>.right>.div3>.content {
      margin-top: 50px;
    }

    .body>.right>.div3>.content>.div3_1 {
      float: left;
      box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
      border-radius: 2px;
      padding: 0 6px;
      text-align: center;
      width: calc((100% - 150px)/4);
      height: 195px;
      background-color: white;
      margin: 12px;
      transition: transform 0.1s linear;
    }

    .body>.right>.div3>.content>.div3_1:hover {
      box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.12);
      transform: translate3d(0, -4px, 0);
      color: #887035;
    }

    .body>.right>.div3>.content>.div3_1>img {
      margin-top: -50px;
      height: 72px;
      margin-bottom: -24px;
    }

    .body>.right>.div3>.content>.div3_1>.title {
      color: rgba(0, 0, 0, 0.87);
      font-weight: bold;
      margin: 26px 0 8px;
    }

    .body>.right>.div3>.content>.div3_1>.text {
      color: rgba(0, 0, 0, 0.56);
      font-size: 14px;
      margin-bottom: 18px;
    }

    .body>.right>.div3>.content>.div3_1>.more>a {
      color: #C2A661;
      font-size: 12px;
      font-weight: 400;
      margin-bottom: 24px;
      text-decoration: none;
    }

    .body>.right>.div4 {
      height: 417px;
    }
  </style>
</head>

<body>
  <div class="body">
    <div class="left">
      <header class="header">
        <!-- 头部菜单logo -->
        <div class="logo">
          <a href="">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt="logo">
          </a>
        </div>
        <!-- 头部菜单导航 -->
        <div class="primary">
          <li>门店</li>
          <li>我的账户</li>
          <li>菜单</li>
        </div>
        <!-- 头部右侧的图标 -->
        <div class="icon">
          <a href="">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg" alt="">
          </a>
        </div>
      </header>
      <div class="left_body">
        <div class="text">
          心情惬意，来杯咖啡吧 ☕
        </div>
        <div class="button">
          <div class="login">
            <img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg" alt="">
            <div class="login_btn">登录</div>
          </div>
          <div class="register">
            注册
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="lunbo">
        <img
          src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg"
          alt="">
      </div>
      <div class="div1">
        <div class="div1_1">
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" alt="">
        </div>
        <div class="div1_1">
          <img
            src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg"
            alt="">
        </div>
        <div class="div1_1">
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-cn.jpg" alt="">
        </div>
        <div class="clear"></div>
      </div>
      <div class="div2">
        <div class="div2_1">
          <div class="title">星享俱乐部</div>
          <div class="text">开启您的星享之旅，星星越多、会员等级越高、
            <br>
            好礼越丰富。<a href="">了解更多 ›</a>
          </div>
          <div class="button">
            <div class="register">注册</div>
            <div class="login">登录</div>
          </div>
        </div>
        <div class="div2_2"><img
            src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg" alt=""></div>
      </div>
      <div class="div3">
        <div class="title">
          星巴克精选
        </div>
        <div class="text">在星巴克天猫旗舰店发现更多咖啡心意</div>
        <div class="content">
          <div class="div3_1">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png"
              alt="">
            <div class="title">会员星礼包</div>
            <div class="text">星享卡新升级
              <br>更多心意好礼
            </div>
            <div class="more">
              <a href="">了解更多 ›</a>
            </div>
          </div>
          <div class="div3_1">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-02.png"
              alt="">
            <div class="title">会员星礼包</div>
            <div class="text">星享卡新升级
              <br>更多心意好礼
            </div>
            <div class="more">
              <a href="">了解更多 ›</a>
            </div>
          </div>
          <div class="div3_1">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png"
              alt="">
            <div class="title">会员星礼包</div>
            <div class="text">星享卡新升级
              <br>更多心意好礼
            </div>
            <div class="more">
              <a href="">了解更多 ›</a>
            </div>
          </div>
          <div class="div3_1">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-reserve.png"
              alt="">
            <div class="title">会员星礼包</div>
            <div class="text">星享卡新升级
              <br>更多心意好礼
            </div>
            <div class="more">
              <a href="">了解更多 ›</a>
            </div>
          </div>
        </div>
      </div>
      <div class="div4">

      </div>
    </div>
  </div>
</body>

</html>